<template>
  <div class="line_display">
    <!-- 饼图、环图 -->
    <!-- 高亮显示 -->
    <div class="gao_liang">
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
            <div class="gao_liang_title">高亮显示</div>
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
        </a-row>

        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">放大效果</span>
                <a-tooltip>
                    <template slot="title">
                        是否开启 hover 在拐点标志上的放大效果。
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
                <a-switch checked-children="开" un-checked-children="关" v-model="form.display.series[0].emphasis.scale" />
            </a-col>
        </a-row>
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">聚焦效果</span>
                <a-tooltip>
                    <template slot="title">
                        在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
                <a-radio-group v-model="form.display.series[0].emphasis.focus">
                    <a-radio value="none">
                        无
                    </a-radio>
                    <a-radio value="self">
                        聚焦当前
                    </a-radio>
                    <a-radio value="series">
                        聚焦系列
                    </a-radio>
                </a-radio-group>
            </a-col>
        </a-row>
    </div>

    <!-- 饼/环图设置 -->
    <div class="gao_liang">
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
            <span style="margin-right: 8px;">显示标签</span>
            <a-tooltip>
                <template slot="title">
                是否显示标签
                </template>
                <a-icon type="exclamation-circle" />
            </a-tooltip>
            ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
            <a-switch checked-children="是" un-checked-children="否" v-model="form.display.label.show" />
            </a-col>
        </a-row>
        <a-row style="margin-top: 10px;">
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">标签位置</span>
                <a-tooltip>
                    <template slot="title">
                        标签的位置
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
                <a-select v-model="form.display.label.position" :disabled="!form.display.label.show" style="width: 200px;">
                    <a-select-option v-for="(item, index) in label_position" :key="index" :value="item.value">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-col>
        </a-row>
    </div>

    <!-- 图例 -->
    <div class="gao_liang">
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
            <div class="gao_liang_title">图例</div>
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
        </a-row>
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">显示</span>
                <a-tooltip>
                    <template slot="title">
                        是否开启图例的显示
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
                <a-switch checked-children="是" un-checked-children="否" v-model="form.display.legend.show" />
            </a-col>
        </a-row>
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">排列方向</span>
                <a-tooltip>
                    <template slot="title">
                        图例列表的布局朝向
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
            <a-radio-group v-model="form.display.legend.orient" :disabled="!form.display.legend.show">
                <a-radio value="horizontal">
                    水平
                </a-radio>
                <a-radio value="vertical">
                    垂直
                </a-radio>
            </a-radio-group>
            </a-col>
        </a-row>
        <a-row style="margin-top: 10px;">
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">图例位置</span>
                <a-tooltip>
                    <template slot="title">
                        图例组件离容器四侧的距离
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20" class="tu_li_position">
                <a-input placeholder="上" v-model="form.display.legend.top" :disabled="!form.display.legend.show"></a-input>
                <a-input placeholder="右" v-model="form.display.legend.right" :disabled="!form.display.legend.show"></a-input>
                <a-input placeholder="下" v-model="form.display.legend.bottom" :disabled="!form.display.legend.show"></a-input>
                <a-input placeholder="左" v-model="form.display.legend.left" :disabled="!form.display.legend.show"></a-input>
            </a-col>
        </a-row>
    </div>
    <!-- 工具栏 -->
    <div class="gao_liang">
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
                <div class="gao_liang_title">工具栏</div>
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
        </a-row>
        <a-row>
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">显示</span>
                <a-tooltip>
                    <template slot="title">
                        是否显示工具栏组件
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
              ：
            </a-col>
            <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
                <a-switch checked-children="是" un-checked-children="否" v-model="form.display.toolbox.show" />
            </a-col>
        </a-row>
        <a-row style="margin-top: 10px;">
            <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
                <span style="margin-right: 8px;">工具箱</span>
                <a-tooltip>
                    <template slot="title">
                        各工具配置项
                    </template>
                    <a-icon type="exclamation-circle" />
                </a-tooltip>
                ：
            </a-col>
          <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
              <a-checkbox-group v-model="form.display.toolbox.feature" :disabled="!form.display.toolbox.show">
                  <a-checkbox value="saveAsImage" name="type">
                      保存图片
                  </a-checkbox>
                  <a-checkbox value="dataView" name="type">
                      数据视图
                  </a-checkbox>
              </a-checkbox-group>
          </a-col>
        </a-row>
    </div>
  </div>
</template>

<script>
import bus from '@/views/components/bus'
  export default {
    props: ['display', 'form'],
    data() {
        return {
            label_position: [
                { name: '漏斗图左侧', value: 'left' },
                { name: '漏斗图右侧', value: 'right' },
                { name: '漏斗图梯形内部', value: 'inside' },
                { name: '漏斗图梯形内部右侧', value: 'insideRight' },
                { name: '漏斗图梯形内部左侧', value: 'insideLeft' },
                { name: '漏斗图左侧上部', value: 'leftTop' },
                { name: '漏斗图左侧下部', value: 'leftBottom' },
                { name: '漏斗图右侧上部', value: 'rightTop' },
                { name: '漏斗图右侧下部', value: 'rightBottom' }
            ]
        }
    },
    methods: {
      onSubmit () {
        const _chartForm = this.form.display
        if (!_chartForm.series[0].emphasis.focus) return  false
        if (_chartForm.label.show) {
          if (!_chartForm.label.position) return false
        }
        if (_chartForm.toolbox.show) {
          if (!_chartForm.toolbox.feature.length) return  false
        }
        return  true
      },
    },
    mounted() {
        bus.$on('verifyForm',(back)=>{
            back(this.onSubmit())
        }) 
    },
    beforeDestroy() {
        bus.$off('verifyForm')
    },
  }
</script>

<style scoped>
.gao_liang_title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,.85);
}

.gao_liang div {
  line-height: 35px;
}

.mu_biao_xian {
  display: flex;
  justify-content: space-around;
}

.mu_biao_xian input {
  width: 45%;
}

.tu_li_position {
  display: flex;
  justify-content: space-around;
}

.tu_li_position input {
  width: 19%;
}

.gao_liang_title {
  text-indent: 10px;
}
</style>